<div class="dataTable">
  <div class="title">{{'DataManagement.IntersectionTrafficVolumeReport.IntersectionTrafficVolumeReport' | translate}}</div>

  <div class="table-content intersection-traffic-volume-report">
    <div class="report_filter" nz-row>
      <div style="display: flex;align-items: center" class="filterItem" nz-col nzSpan="6">
        <div style="font-weight: bold;font-size:14px" class="filterName">
          {{'DataManagement.IntersectionTrafficVolumeReport.DetectorRoad' | translate}}
        </div>
        <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" nzAllowClear [(ngModel)]="roadSelect"
          (ngModelChange)='roadSearch()' [nzDropdownMatchSelectWidth]="false" nzMode="multiple"
          [nzMaxTagCount]="roadSelect?.length > 1? 0 : 1">
          <nz-option *ngFor="let option of roadOptions" [nzValue]="option" [nzLabel]="option.name">
          </nz-option>
        </nz-select>
        <!-- <span nz-col nzSpan="2">
            <i class="iconfont icon-dingwei" style="cursor: pointer"></i>
          </span> -->
      </div>

      <div style="display: flex;align-items: center" class="filterItem" nz-col nzSpan="7">
        <div style="font-weight: bold;font-size:14px" class="filterName">
          {{'DataManagement.IntersectionTrafficVolumeReport.TimeRange' | translate}}
        </div>
        <!-- <nz-range-picker nzFormat="yyyy-MM-dd" nzSize="default"
          [(ngModel)]="dateRange" (nzOnOk)="onOk($event)" (ngModelChange)="onChange($event)"></nz-range-picker>
          <nz-time-picker nzPlaceHolder='Start Time' style="margin: 0 0.2rem" [(ngModel)]="startTime" nzFormat="HH:mm" (ngModelChange)='startTimeSearch()'></nz-time-picker>
          <nz-time-picker nzPlaceHolder='End Time' [(ngModel)]="endTime" nzFormat="HH:mm" (ngModelChange)='endTimeSearch()'></nz-time-picker> -->
        <nz-range-picker [nzPlaceHolder]="['Start Time', 'End Time']" [(ngModel)]="dateRange"
          (ngModelChange)="onChange($event)" (nzOnOk)="onOk($event)" [nzDisabledDate]="disabledDate"
          [nzDisabledTime]="disabledRangeTime" [nzFormat]="'yyyy/MM/dd'">
        </nz-range-picker>
      </div>

      <div style="display: flex;align-items: center" class="filterItem" nz-col nzSpan="5">
        <div style="font-weight: bold;font-size:14px" class="filterName">
          {{'DataManagement.IntersectionTrafficVolumeReport.Include' | translate}}</div>
        <nz-select nzPlaceHolder="include" nzAllowClear [(ngModel)]="includeSelect" (ngModelChange)='includeSearch()'
          [nzDropdownMatchSelectWidth]="false">
          <nz-option *ngFor="let option of includeOptions" [nzValue]="option.id"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>

     
      <!-- <div style="display: flex;align-items: center" class="filterItem">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.StartTime' | translate}}</div>
        <nz-time-picker [(ngModel)]="startTime" nzFormat="HH:mm" (ngModelChange)='startTimeSearch()'></nz-time-picker>
      </div>
      <div style="display: flex;align-items: center" class="filterItem">
        <div style="font-weight: bold;font-size:14px">{{'DataManagement.TrafficDataReport.EndTime' | translate}}</div>
        <nz-time-picker [(ngModel)]="endTime" nzFormat="HH:mm" (ngModelChange)='endTimeSearch()'></nz-time-picker>
      </div> -->
    </div>

    <div class="report_filter" nz-row>

      <div style="display: flex;align-items: center" class="filterItem" nz-col nzSpan="6">
        <div style="font-weight: bold;font-size:14px" class="filterName">
          {{'DataManagement.IntersectionTrafficVolumeReport.Interval' | translate}}</div>
        <nz-select nzPlaceHolder="interval" nzAllowClear [(ngModel)]="intervalSelect" (ngModelChange)='intervalSearch()'
          [nzDropdownMatchSelectWidth]="false">
          <nz-option *ngFor="let option of intervalOptions" [nzValue]="option.name"
            [nzLabel]="'DataManagement.TrafficDataReport.'+option.name|translate">
          </nz-option>
        </nz-select>
      </div>
      <!-- <div style="display: flex;align-items: center" class="filterItem">
        <div style="font-weight: bold;font-size:14px">
          {{'DataManagement.IntersectionTrafficVolumeReport.Site' | translate}}
        </div>
        <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" style="width: 2rem" nzAllowClear [(ngModel)]="siteSelect"
          (ngModelChange)='siteSearch()'>
          <nz-option *ngFor="let option of siteOptions" [nzValue]="option.name" [nzLabel]="option.name">
          </nz-option>
        </nz-select>
      </div> -->
      <div style="display: flex;align-items: center" class="filterItem" nz-col nzSpan="4">
        <div style="font-weight: bold;font-size:14px;" class="filterName">
          {{'DataManagement.IntersectionTrafficVolumeReport.Site' | translate}}
        </div>
        <nz-select nzPlaceHolder=" VBID-DMM120_ccc  Road1" nzAllowClear [(ngModel)]="siteSelect"
          (ngModelChange)='siteSearch($event)' [nzDropdownMatchSelectWidth]="false">
          <nz-option *ngFor="let option of siteOptions" [nzValue]="option" [nzLabel]="option.name">
          </nz-option>
        </nz-select>
      </div>
      <div class="search-box" nz-col nzSpan="3">
        <button nz-button nzType="primary" (click)="search()"><i nz-icon nzType="search"
            nzTheme="outline"></i>{{'DataManagement.RoadCongestionReport.Search' | translate}}</button>
      </div>
    </div>

    <div class="body-content">
      <div class="picture" *ngIf="isTableShow">
        <img src="../../../../content/images/road_test_img.jpg" alt="">
      </div>

      <div class="report" *ngIf="isTableShow">
        <div class="report_data">
          <div class="report_title">
            {{'DataManagement.IntersectionTrafficVolumeReport.CongestionTime' | translate}}
          </div>
          <div class="echarts" echarts [options]="options" [merge]="updateOptions" (chartInit)="onChartInit($event)">
          </div>
        </div>
      </div>
    </div>

  </div>



</div>